<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul id="city">
      <li>data1</li>
      <li id="data2">data2</li>
      <li>data3</li>
    </ul>
    <button onclick="findChildren()">获得子元素</button>
    <button onclick="findParent()">获得父元素</button>
  </body>
</html>
<script>
  function findChildren() {
    var ulComp = document.getElementById('city')
    //children 该元素的所有子元素
    console.log('ul孩子们：' + ulComp.children[1].textContent)
    //childElementCount 该元素的所有子元素个数
    console.log('ul的孩子的个数:' + ulComp.childElementCount)
    // firstElementChild 该元素的第一个子元素
    console.log('第一个孩子:' + ulComp.firstElementChild.textContent)
    // lastElementChild 该元素的最后一个子元素
    console.log('最后一个孩子:' + ulComp.lastElementChild.textContent)
  }

  function findParent() {
    //通过子元素获得父元素
    var li2Comp = document.getElementById('data2')
    var parentComp = li2Comp.parentElement
    console.log('父元素:' + parentComp)
    console.log('父元素:' + parentComp.innerHTML)
  }
</script>
